<template>
  <template v-if="typeof field.slot === 'function'">
    <el-form-item v-if="field.item" v-loading="field.loading" class="form-item-slot" v-bind="field.item">
      <component :is="field.slot" />
    </el-form-item>
    <component :is="field.slot" v-else class="form-item-slot" />
  </template>
  <el-form-item v-else v-loading="field.loading" v-bind="field.item || {}">
    <el-cascader v-if="field.name === 'el-cascader'" v-model="model[field.item?.prop]" v-bind="field.component"
      v-on="field.events || {}" />
    <el-date-picker v-else-if="field.name === 'el-date-picker'" v-model="model[field.item?.prop]" v-bind="field.component"
      v-on="field.events || {}" />
    <template v-else-if="field.name === 'number-input'">
      <el-input-number v-model="model[field.item?.prop]" v-bind="field.component" controls-position="right" />
    </template>
    <component :is="field.name" v-else v-model="model[field.item?.prop]" v-bind="field.component"
      v-on="field.events || {}">
      <template v-if="field.slot">
        <template v-if="field.slot.text">{{ field.slot.text }}</template>
      </template>
      <el-option v-for="opt in field.options" v-else-if="field.name === 'el-select' && field.options" :key="opt.value"
        v-bind="opt" />
      <el-checkbox v-for="opt in field.options" v-else-if="field.name === 'el-checkbox-group' && field.options"
        :key="opt.label" v-bind="opt" v-model="opt.checked" />
      <template v-else-if="field.child">
        <component :is="field.child.name" v-bind="field.child.component" v-model="field.child.value"
          v-on="field.child.events || {}" />
      </template>
      <template v-else-if="field.children">
        <template v-for="(child) in field.children" :key="i">
          <component :is="child.name" v-bind="child.props" v-on="child.events || {}" />
        </template>
      </template>
    </component>
  </el-form-item>
  <template v-if="field.after">
    <component :is="field.after.name" v-bind="field.after?.component ?? {}" v-on="field.after?.events ?? {}">
      {{ field.after?.default && field.after.default() }}</component>
  </template>
</template>
<script lang="ts" setup>
import { FormItemPropsType } from './Form';

const props: Readonly<FormItemPropsType> = defineProps(['model', 'field']);

if (typeof props?.field?.remoteHandler === 'function') {
  props.field.remoteHandler(props.field);
}
</script>
